<template>
  <div class="yuedu" v-if="readList">
    <div v-if="readList[0].length>0">
      <div v-for="(v, i) in readList" :key="i">
        <div class="ydInfo" v-for="item in v" :key="item.data.id">
          <a
            v-if="item.data.target"
            :href="item.data.target.param"
            class=""
            v-lazy-container="{
              selector: 'img',
              error: 'https://wap.epet.com/app/images/error.png',
              loading: 'https://wap.epet.com/app/images/loading.png',
            }"
          >
            <img :data-src="item.data.cover.img_url" alt="" />
            <p>{{ item.data.title }}</p>
          </a>
          <div>
            <div>
              <a v-if="item.data.user" :href="item.data.user.target.param">
                <img :src="item.data.user.avatar.img_url" alt="" />
                <span>{{ item.data.user.username }}</span>
              </a>
            </div>
            <div>
              <img src="../../assets/look.png" alt="" />
              <span>{{ item.data.viewnums }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="noInfo" v-else>
        <h6>暂无内容</h6>
    </div>
  </div>
</template>

<script>
export default {
  name: "xgread",
  data() {
    return {
      readList: null,
    };
  },
  props: ["ydPagNam",'ydtype'],
  methods: {
    async reqRead(pageNam,ydtype) {
      let ydList = await this.axios(
        `https://mall.api.epet.com/v3/content/opgc/IndexV3.html?do=GetList&param=${ydtype}&page=${pageNam}&pet_type=dog&system=wap&isWeb=1&version=564&distinct_id=17c4dcad9d349b-0277e5edad1932-5437971-250125-17c4dcad9d4913&debug_param=`
      );
      //   console.log(ydList.data.data.list);
      let redList = [[], []];
      // let n = 0
      for (let index = 0; index < ydList.data.data.list.length; index++) {
        if (index % 2 == 0) {
          redList[0].push(ydList.data.data.list[index]);
        }
        if (index % 2 != 0) {
          redList[1].push(ydList.data.data.list[index]);
        }
      }
      // resolve(redList);
      return new Promise((resolve, reject) => {
        resolve(redList);
      });
    },
  },
  async created() {
    let ydLi = await this.reqRead(this.ydPagNam,this.ydtype);
    // console.log(ydLi);
    this.readList = ydLi
  },
  watch: {
    async ydPagNam() {
      let ydLi = await this.reqRead(this.ydPagNam,this.ydtype);
      // console.log(this.readList[1],ydLi[1]);
      this.readList[1]= this.readList[1].concat(ydLi[1])
      this.readList[0]= this.readList[0].concat(ydLi[0])
      this.readList = [this.readList[0],this.readList[1]]
      // console.log(this.readList);
    },
    async ydtype(){
       let ydLi = await this.reqRead(this.ydPagNam,this.ydtype);
      //  console.log(ydLi);
       this.readList = ydLi
    }
  },
};
</script>

<style scoped lang="less">
.yuedu {
  padding: 0.2rem;
  > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    > div {
      width: 48%;
      .ydInfo {
        width: 100%;
        background-color: #fff;
        margin-bottom: 0.2rem;
        border-radius: 0.2rem;
        overflow: hidden;
        > a {
          > img {
            width: 100%;
          }
        }
        a {
          color: #000;
        }
        > div > div > a > img {
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 0.25rem;
        }
        > div > div > img {
          width: 0.32rem;
          height: 0.29rem;
        }
        > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  .noInfo{
    background: url(https://wap.epet.com/app/img/bitmap404.c33e1bdd.png) 0 0 no-repeat;
    background-size: 200px auto;
    height: 180px;
    background-position: 0 -812px;
    margin: 0 auto;
    width: 200px;
    margin-bottom: 1.2rem;
    >h6{
      width: 100%;
      text-align: center;
    }
  }
}
</style>